<template lang="pug">
.index
  .index-section
    .index-section-bd.index-section-translate
      .index-section-title 经营概况
      .index-section-content
        .index-section-col.border-bottom.border-right
          .index-section-col-value {{detail.visvitAmount}}
          .index-section-col-label 访客量
        .index-section-col.border-bottom
          .index-section-col-value {{detail.materialAmount}}
          .index-section-col-label 浏览量
        .index-section-col.border-right
          .index-section-col-value {{detail.orderNotFinishedCount}}
          .index-section-col-label 样品待发货订单
        .index-section-col
          .index-section-col-value {{detail.orderFinishedCount}}
          .index-section-col-label 样品已完成订单
    .index-section-bd.index-section-survey
      .index-section-title 概况
      .index-section-content
        .index-section-col.border-bottom.border-right
          .index-section-col-value {{detail.supplierBrandCount}}
          .index-section-col-label 品牌
        .index-section-col.border-bottom
          .index-section-col-value {{detail.materialCount}}
          .index-section-col-label 上架材料
        .index-section-col.border-right
          .index-section-col-value {{detail.supplierCase}}
          .index-section-col-label 案例
        .index-section-col
          .index-section-col-value {{detail.unReadCount}}
          .index-section-col-label 未读消息数
  .index-navigation
    .index-section-title 常用功能
    .nav-links
      router-link.nav-item(v-for="item in navigations", :to="{ name: item.url }")
        .nav-item-img(:style="{ 'background-image': `url(${item.img})` }")
        .nav-item-title {{item.title}}
</template>

<script>
import { getCount } from 'api'
export default {
  name: 'index',
  data () {
    return {
      detail: {
        visvitAmount: 0,
        materialAmount: 0,
        orderNotFinishedCount: 0,
        orderFinishedCount: 0,
        supplierBrandCount: 0,
        materialCount: 0,
        supplierCase: 0,
        unReadCount: 0
      },
      navigations: [
        {
          img: require('../static/images/company.png'),
          url: 'basicInfo',
          title: '企业信息'
        }, {
          img: require('../static/images/person.png'),
          url: 'personManage',
          title: '人员管理'
        }, {
          img: require('../static/images/upload.png'),
          url: 'upload',
          title: '材料上传'
        }, {
          img: require('../static/images/material.png'),
          url: 'materialList',
          title: '材料管理'
        }, {
          img: require('../static/images/order.png'),
          url: 'orderList',
          title: '订单管理'
        }, {
          img: require('../static/images/message.png'),
          url: 'noticeList',
          title: '消息管理'
        }
      ]
    }
  },
  methods: {
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getCount)
        this.detail = { ...this.detail, ...ResultSet.userData }
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.getDetail()
    })
  }
}
</script>

<style lang="scss" scoped>
.index {
  padding: 32px;
}
.index-section {
  display: flex;
  align-items: center;
}
.index-section-bd {
  width: 50%;
  &.index-section-translate {
    padding-right: 8px;
  }
  &.index-section-survey {
    padding-left: 8px;
  }
}
.index-section-title {
  position: relative;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
  padding-left: 10px;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 4px;
    height: 100%;
    height: 16px;
    background: #FF2E42;
  }
}
.index-section-content {
  width: 100%;
  height: 432px;
  margin-top: 16px;
  background: #fff;
  border-radius: 12px;
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
}
.index-section-col {
  width: 50%;
  height: 50%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  // border: 1px solid transparent;
  &.border-bottom {
    border-bottom: 1px solid #E1E1E1;
  }
  &.border-right {
    border-right: 1px solid #E1E1E1;
  }
}
.index-section-col-value {
  font-size: 60px;
  font-weight: bold;
  color: #363636;
}
.index-section-col-label {
  margin-top: 20px;
  font-size: 14px;
  color: #7C7C7C;
}
.index-navigation {
  margin-top: 32px;
}
.nav-links {
  width: 100%;
  margin-top: 16px;
  padding: 48px;
  background: #FFFFFF;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.nav-item {
  width: 180px;
  height: 174px;
  background: #F7F7F7;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.nav-item-img {
  width: 80px;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nav-item-title {
  margin-top: 16px;
  font-size: 16px;
  color: #363636;
}
</style>
